<template>
  <div class="home">
    <div class="home_nav">
      <!-- 搜索框 -->
      <input type="text" placeholder="输入关键词,商品ID或网址" @click="gotoSearch()" />
      <div class="dinyue" @click="gotohlfmessage">
        <img
          src="https://mall.leyifan.com/static/h5/new_images/user_remind.png"
          alt=""
          width="100%"
          height="100%"
        />
      </div>
      <!-- </router-link> -->
    </div>
    <div class="home_banner" lazy-render>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image.pic" alt="banner" style="display: block; width: 375rem;"  />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="after_banner">
      <router-link to="/newpeoplehlf">
        <div class="new">
          <img
            style="width: 16rem; height: 16rem"
            src="https://mall.leyifan.com/static/h5/new_images/icon_newbie.png"
            alt=""
          />
          <span>新人指南</span>
          <img
            style="width: 10rem; height: 10rem"
            src="https://mall.leyifan.com/static/h5/new_images/index_right.png"
            alt=""
          />
        </div>
      </router-link>
      <router-link to="/costcompositionhlf">
        <div class="new">
          <img
            style="width: 16rem; height: 16rem"
            src="https://mall.leyifan.com/static/h5/new_images/icon_money.png"
            alt=""
          />
          <span>费用构成</span>
          <img
            style="width: 10rem; height: 10rem"
            src="https://mall.leyifan.com/static/h5/new_images/index_right.png"
            alt=""
          />
        </div>
      </router-link>
      <router-link to="/lsflogistics">
        <div class="new">
          <img
            style="width: 16rem; height: 16rem"
            src="https://mall.leyifan.com/static/h5/new_images/icon_global.png"
            alt=""
          />
          <span>国际物流</span>
          <img
            style="width: 10rem; height: 10rem"
            src="https://mall.leyifan.com/static/h5/new_images/index_right.png"
            alt=""
          />
        </div>
      </router-link>
    </div>
    <div class="stores">
      <div class="store_banner">
        <img src="https://mall.leyifan.com/static/h5/new_images/news.png" alt="" />
        <span class="line"></span>
        <van-swipe
          style="height: 26rem; width: 100%; font-size: 12rem"
          vertical
          :autoplay="3000"
          :show-indicators="false"
        >
          <van-swipe-item
            style="display: flex; justify-content: space-between; align-items: center" @click="gotonotice"
          >
            <span>拍照服务全新上线</span>
            <img
              style="width: 10rem; height: 10rem"
              src="https://mall.leyifan.com/static/h5/new_images/index_right.png"
              alt=""
            />
          </van-swipe-item>
          <van-swipe-item
            style="display: flex; justify-content: space-between; align-items: center"
          >
            <span>乐淘一番ios端【雅虎日拍】站点维护通知</span>
            <img
              style="width: 10rem; height: 10rem"
              src="https://mall.leyifan.com/static/h5/new_images/index_right.png"
              alt=""
            />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="store_list">
        <div class="store_item" v-for="(store, index) in storelist" :key="index" @click="gotocategory(store.value)">
          <img
            :src="`https://mall.leyifan.com/static/h5/new_images/class_${index + 1}.png`"
            style="width: 50rem; height: 50rem"
          />
          <div>{{ store.Text }}</div>
        </div>
      </div>
    </div>
    <div class="certificate" @click="gotoCertificate">
      <img
        src="https://image1.leyifan.cn/reborn-mall-cdn/crmebimage/public/content/2024/12/11/d7a93eee751547c3a60aed7b3038d4c3qaia30cc3i.png"
        alt=""
      />
    </div>
    <div class="type">
      <van-tabs v-model:active="active" style="font-size: 14rem;"  color="#ff3d58"  animated swipeable>
        <van-tab :title="indexClassifyitem.name" v-for="(indexClassifyitem,index) in indexClassify" :key="index">
          <HomeTypeItem :indexClassifyitem="JSON.parse(indexClassifyitem.classifyChildren)"></HomeTypeItem>
        </van-tab>
      </van-tabs>
    </div>
    <div class="list">
      <van-tabs v-model:active="active2" style="font-size: 14rem;"  color="#ff3d58" line-width="30" animated swipeable>
        <van-tab :title="item" v-for="(item,index) in lwarr" :key="index">
          <HomeCommendList :thisid="index"></HomeCommendList>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>


<script setup lang="ts">
import HomeTypeItem from '@/components/HomeTypeItem.vue';
import HomeCommendList from '@/components/HomeCommendList.vue';
import { ref } from 'vue'
import axios from '@/api/axios'

// 这是轮播图

let images = ref([])

import { useRouter } from 'vue-router'
// 钩子函数获取路由实例
const router = useRouter()
const gotohlfmessage = () => {
  router.push({ path: "/hlfmessage" });
}
const gotoCertificate = () => {
  router.push({ path: '/trick' })
}

axios
  .get('/api/front/index')
  .then((res) => {
    images.value = res.data.data.banner
  })
  .catch((error) => {
    console.error('Error fetching data:', error)
  })
// 这是商店列表
let storelist = ref([])
axios
  .get(`/api/front/index/siteList`)
  .then((res) => {
    storelist.value = res.data.data
  })
  .catch((error) => {
    console.error('Error fetching data:', error)
  })
// 这是类型tab选项卡
const active = ref(0);
const active2 = ref(0);
let indexClassify = ref(null)
    // return { active };
    axios
  .get(`/api/front/index`)
  .then((res) => {
    indexClassify.value = res.data.data.indexClassify
    // console.log(indexClassify.value)
  })
  .catch((error) => {
    console.error('Error fetching data:', error)
  })


const gotoSearch = () => {
  router.push({ path: '/Search' })
}
let gotocategory = (value) => {
  router.push({ path: '/category', query: { value } })
}
const gotonotice = () => {
  router.push({ path: "/hlfnotice" });
}
// 这里是都在看...
let lwarr = ref(['都在买','都在看','都想要'])
</script>


<style lang="less" scoped>
// 隐藏滚动条
::-webkit-scrollbar {
  display: none;
}
.home {
  width: 100vw;
  padding-top: 66rem;
  padding-bottom: 50rem;
  // overflow: hidden;
  .home_nav {
    width: 100vw;
    padding-left: 14rem;
    height: 66rem;
    padding-bottom: 10rem;
    display: flex;
    align-items: center;
    position: fixed;
    background-color: white;
    top: 0;
    z-index: 6;
    &::after {
      display: block;
      content: '';
      width: 22rem;
      height: 22rem;
      position: absolute;
      top: 17rem;
      left: 24rem;
      background-image: url('https://mall.leyifan.com/static/h5/new_images/index_search.png');
      background-size: cover;
      // background-color: red;
      z-index: 5;
    }
    input {
      width: 100%;
      height: 42rem;
      padding: 0 38rem;
      background-color: #f5f5f5;
      font-size: 14rem;
      color: #ddd;
      border: 0;
      border-radius: 10rem;
    }
    .dinyue {
      width: 28rem;
      height: 28rem;
      margin-left: 14rem;
      margin-right: 19rem;
      display: flex;
      align-items: center;
      position: relative;
      &::after {
        display: block;
        content: '59';
        position: absolute;
        padding: 1rem 4rem;
        border-radius: 10rem;
        font-size: 8rem;
        background-color: red;
        color: white;
        right: -11rem;
        top: -2rem;
        border: 2rem solid white;
      }
      img {
        display: block;
      }
    }
  }
  .after_banner {
    height: 40rem;
    width: 100%;
    padding: 0 14rem;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .new {
      display: flex;
      align-items: center;
      height: 100%;
      span {
        display: flex;
        align-items: center;
        font-size: 13rem;
        color: #999;
        margin: 0 3rem 1rem 3rem;
      }
    }
  }
  .stores {
    height: 140rem;
    padding: 0 14rem;
    padding-top: 14rem;
    // background-color: red;
    .store_banner {
      height: 32rem;
      padding: 10rem 8rem;
      background-color: #f5f5f5;
      display: flex;
      align-items: center;
      border-radius: 10rem;
      img {
        width: 16rem;
      }
      .line {
        display: block;
        width: 1rem;
        margin: 0 10rem;
        background-color: #aaa;
        height: 10rem;
      }
    }
    .store_list {
      width: 100%;
      margin-top: 10rem;
      height: 73rem;
      overflow-x: scroll;
      display: flex;
      .store_item {
        width: 64rem;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        padding-right: 14rem;
        flex-shrink: 0;
        img {
          width: 50rem;
        }
        div {
          font-size: 11rem;
        }
      }
    }
  }
  .type{
    padding: 0 14rem;
  }
}
</style>

